<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    :title="title"
    width="1100"
    show-footer
    show-zoom
    resize
    destroy-on-close
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <div class="flex justify-between uploadBox">
      <VUpload
        :limit="999"
        :validator="validator"
        :progress="true"
        type="file"
        :multiple="true"
        @success="success"
      >
        <el-button type="primary" link class="flex items-center">
          <svg-icon class="text-sm mr-2" icon-class="Plus"></svg-icon>
          上传文件
        </el-button>
      </VUpload>
    </div>
    <div class="w-full py-6" v-if="certificate">
      <vxe-grid v-bind="gridOptions" ref="XTable">
        <template #certificate_type="{ row }">
          <el-select v-model="row.certificate_type" filterable>
            <el-option
              v-for="item in options['goods.GoodsSpu']?.[0].authenticationText"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </template>
        <template #remark="{ row }">
          <el-input v-model="row.remark" placeholder="请输入备注"></el-input>
        </template>
        <template #country_id="{ row }">
          <SelectCountry v-model="row.country_id" placeholder="国家"></SelectCountry>
        </template>
        <template #patent_type="{ row }">
          <el-select v-model="row.patent_type" filterable>
            <el-option
              v-for="item in options['goods.GoodsSkuCertificate']?.[0].patentTypeText"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </template>
        <template #apply_time="{ row }">
          <el-date-picker
            v-model="row.apply_time"
            type="date"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </template>
        <template #operation="{ row }">
          <el-button type="danger" @click="deleteRow(row, index)">删除</el-button>
        </template>
      </vxe-grid>
    </div>
    <template #footer>
      <div class="footer-btn">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import VUpload from "@/components/VUpload/index.vue";
import SelectCountry from "@/components/SelectCountry";
import { ElMessage } from "element-plus";
import { batchUploadAuth, batchUploadPatent, batchUploadManual } from "../api.js";
const visible = ref(false);
const loading = ref(false);
const title = ref("附件上传");
const certificate = ref(null);
const ids = ref({});
const typeList = {
  1: "批量上传认证证书",
  2: "批量上产产品说明书",
  3: "批量上传专利证书",
};
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const { options } = toRefs(props);
const columns = [
  { title: "序号", type: "seq", width: 60 },
  { title: "文件名称", field: "filename" },
];
const columns1 = [
  {
    field: "certificate_type",
    title: "证书类型",
    align: "center",
    slots: { default: "certificate_type" },
  },
  {
    title: "操作",
    align: "center",
    width: 90,
    slots: { default: "operation" },
  },
];
const columns2 = [
  {
    field: "remark",
    title: "备注",
    align: "center",
    slots: { default: "remark" },
  },
  {
    title: "操作",
    align: "center",
    width: 90,
    slots: { default: "operation" },
  },
];
const columns3 = [
  {
    field: "country_id",
    title: "国家",
    align: "center",
    slots: { default: "country_id" },
  },
  {
    field: "patent_type",
    title: "专利类型",
    align: "center",
    slots: { default: "patent_type" },
  },
  {
    field: "apply_time",
    title: "申请时间",
    align: "center",
    slots: { default: "apply_time" },
  },
  {
    field: "remark",
    title: "备注",
    align: "center",
    slots: { default: "remark" },
  },
  {
    title: "操作",
    width: 90,
    align: "center",
    slots: { default: "operation" },
  },
];
const load = ref(false);
const open = async (val) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  const { type, data } = val;
  certificate.value = type;
  gridOptions.columns = columns.concat(
    type == 1 ? columns1 : type == 2 ? columns2 : columns3
  );
  ids.value[data.name] = data.ids;
  title.value = typeList[type];
  visible.value = true;
};

const gridOptions = reactive({
  round: true,
  height: "400",
  autoHidden: true,
  showOverflow: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [],
  columns: [],
});

const success = (obj) => {
  gridOptions.data.push({
    filename: obj.filename,
    filepath: obj["data-show-file"],
  });
};

// 上传校验
const validator = (fileInfo) => {
  return (() => {})();
};
const deleteRow = (row, index) => {
  gridOptions.data.splice(index, 1);
};
// 文件上传
const save = async () => {
  const api = {
    1: batchUploadAuth,
    2: batchUploadManual,
    3: batchUploadPatent,
  };
  const { message, code } = await api[certificate.value]({
    ...ids.value,
    data: gridOptions.data,
  });
  if (code != 200) return;
  ElMessage.success(message);
  close();
};
const close = () => {
  visible.value = false;
  certificate.value = null;
  ids.value = {};
  gridOptions.data = [];
  gridOptions.columns = [];
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  height: 52px;
  border-radius: 4px;
  border: 1px dashed #3366f1;
  justify-content: center;
  align-items: center;

  .v-upload {
    width: 100%;
    height: 100%;

    :deep(.el-upload) {
      width: 100%;
      height: 52px;
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.upload-file-uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

:deep(.el-upload-list) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .el-upload-list__item {
    width: 100%;
    padding: 3px 50px;
  }
}
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
